import React, { useState, useEffect } from 'react';
import { useHistory } from "react-router-dom";
import http from '../../../model/http'; 
import './userList.less';
import { Badge, PullToRefresh, List, Toast, Modal, Button, SwipeAction } from 'antd-mobile';
import Header from "../../../components/header/Header";
import man from '../../../libs/img/user/man.png';
import woman from '../../../libs/img/user/woman.png'; 

// let page = 1;
// const h = document.documentElement.clientHeight - 20;

function UserList() {
    const history = useHistory(), 
        query = http.useQuery(),
        task_id = query.get('taskId'),
        group_id = query.get('groupId');
    
    // const [load, setLoad] = useState(false);
    // const [data, setData] = useState([]) 

    const [listData, setListData] = useState([])
    const [clientReviewArrID, setClientReviewArrID] = useState([])
 
    /*渲染完成*/
    useEffect(async () => { 

 
        // 数据
        let clientReviewArrData = localStorage.getItem(`clientReviewArrData_${group_id}`) ? JSON.parse(localStorage.getItem(`clientReviewArrData_${group_id}`)) : ''
 
        // idArr 完成的id
        let clientReviewArrID = localStorage.getItem(`clientReviewArrID_${group_id}`)? JSON.parse(localStorage.getItem(`clientReviewArrID_${group_id}`)):[]


        
        
        // 如果为空就请求获取数据 不为空就拿本地的数据
        if(clientReviewArrData == ''){
            const result = await http.post('/callcenter/workbenchInviteTaskCustomerList',{
                taskId: task_id,
                groupId: group_id
            })
            if(result.code == 0){
                setListData(result.data)
                localStorage.setItem(`clientReviewArrData_${group_id}`, JSON.stringify(result.data))
            }
        }else{
            let newData = clientReviewArrData.filter(item => {
                return clientReviewArrID.indexOf(item.id) == -1
            })
            console.log(newData) 
            if(newData.length < 1){
                const result = await http.post('/callcenter/workbenchInviteTaskCustomerList',{
                    taskId: task_id,
                    groupId: group_id
                })
                if(result.code == 0){
                    setListData(result.data)
                    setClientReviewArrID([])
                    localStorage.setItem(`clientReviewArrData_${group_id}`, JSON.stringify(result.data)) 
                    
                    localStorage.removeItem(`clientReviewArrID_${group_id}`)
                }
            }else{
                setListData(clientReviewArrData)
                setClientReviewArrID(clientReviewArrID)
            } 
            
        }
        
        

    }, []) 

    // 点击list
    const listClick = async(item) => { 
        history.push(`/clientReview/userDetail?taskId=${task_id}&groupId=${group_id}`,{
            detailData: item
        })
    }


    // 左滑点击
    const editRemove = async (item) => { 
        Modal.alert('提示', '确认发送回访结果通知咨询师', [
            { text: '取消' },
            {
              text: '确认', onPress: async () => {
                const result = await http.post('/callcenter/notifyxizun',{
                    callId: item.id,
                    customerCrmId: item.crm_id
                })
                if(result.code == 0){
                    Toast.success(result.msg)
                }else{
                    Toast.fail(result.msg)
                }
              }
            }
        ])
        
         
    }
    return (
        <div className="v-event-invitation-user-list" style={listData.length < 1 ? {padding:'0'}:{}}>
            {/* <PullToRefresh direction='up' onRefresh={data} refreshing={load} style={{ height: h, overflow: 'auto'}}> */}
            {listData.length > 0 ? listData.map((item,index) => ( 
                <div style={{padding: '0 10px'}}>
                    <SwipeAction
                        disabled={clientReviewArrID.indexOf(item.id) != -1 ? false : true} 
                        autoClose
                        right={[ 
                        {
                            text: <div className="swipe-active-style">
                                <span style={{fontSize:'25px'}} className="iconfont icon-yisheng"></span>
                                <p>通知咨询师</p>
                            </div>,
                            onPress: () => editRemove(item),
                            style: { backgroundColor: '#dd524d', color: 'white',height:'calc(100% - 15px)', fontSize:'25px',paddingLeft: "10px",paddingRight:'10px' },
                        },
                        ]}
                        onOpen={() => console.log('global open')}
                        onClose={() => console.log('global close')}
                    >
                        <div className={clientReviewArrID.indexOf(item.id) != -1? 'user-list-box userListBoxActive' :'user-list-box'} onClick={() => clientReviewArrID.indexOf(item.id) != -1 ? '': listClick(item) }>
                            <p>{index+1}、{item.name}</p>
                        </div>
                    </SwipeAction>
                </div>
            )):<div className="no-data">暂无更多数据</div>}
                
                 
            {/* </PullToRefresh> */}


            <Header />
        </div>
    )
}

export default UserList;